<template>
  <div class="dashboard-container">
    <div class="statistics-section">
      <h2 class="section-title">统计总览</h2>
      <el-row :gutter="20" class="statistics-cards">
        <el-col :span="3" v-for="(item, index) in statisticsData" :key="index">
          <div class="stat-card">
            <div class="stat-value">{{ item.label }}</div>
            <div class="stat-label">{{ item.value }}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="quick-access">
      <h2 class="section-title">快捷入口</h2>
      <el-row :gutter="20">
        <el-col
          :span="6"
          v-for="(item, index) in quickAccessItems"
          :key="index"
        >
          <el-card class="quick-access-card" shadow="hover">
            <div class="card-content">
              <el-icon :class="['icon', item.iconColor]" size="24">
                <component :is="item.icon" />
              </el-icon>
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-row :gutter="20" class="data-section">
      <el-col :span="12">
        <div class="section-box">
          <div class="section-header">
            <h2 class="section-title">进行中的考试</h2>
          </div>
          <el-table :data="examData" style="width: 100%">
            <el-table-column prop="name" label="考试名称" />
            <el-table-column prop="ongoing" label="正在考试" width="100" />
            <el-table-column prop="total" label="考完人数" width="100" />
          </el-table>
        </div>
      </el-col>
      <el-col :span="12">
        <UserStatistics />
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import {
  Monitor,
  Document,
  //   Certificate,
  Collection,
  School,
  Bell,
  Management,
  Setting,
} from "@element-plus/icons-vue";
import UserStatistics from "./echarts/UserStatistics.vue";


const showAlert = ref(true);

const statisticsData = ref([
  { label: "考试场数", value: "20" },
  { label: "靶场数", value: "3" },
  { label: "打靶次数", value: "31" },
  { label: "用户数", value: "28" },
]);

const quickAccessItems = ref([
  {
    icon: Monitor,
    title: "AI智能出题",
    description: "智能化题目生成，高效便捷体验",
    iconColor: "blue",
  },
  {
    icon: Document,
    title: "活动报名",
    description: "考试报名、学习报名、信息收集",
    iconColor: "orange",
  },
  {
    icon: School,
    title: "创建考试",
    description: "快速创建一场考试，支持多种考试方式",
    iconColor: "green",
  },
  {
    icon: Collection,
    title: "添加课程",
    description: "添加课程课件，支持Office、PDF等课件",
    iconColor: "purple",
  },
  // {
  //   icon: Certificate,
  //   title: "证书管理",
  //   description: "证书认证，支持模板自动生成，人工签发",
  //   iconColor: "cyan",
  // },
  {
    icon: Bell,
    title: "知识资源",
    description: "开放知识资源，满足切换需求",
    iconColor: "pink",
  },
  {
    icon: Management,
    title: "题库管理",
    description: "批量导入内容，导出题库管理配置",
    iconColor: "indigo",
  },
  {
    icon: Setting,
    title: "公告管理",
    description: "发布公告通知，新增公告管理等",
    iconColor: "teal",
  },
]);

const examData = ref([
  { name: "WoniuCTF2025", ongoing: 0, total: 1 },
  { name: "WoniuCUP2025", ongoing: 0, total: 0 },
  { name: "WoniuCyber2025", ongoing: 0, total: 0 },
  { name: "WoniuMajor2025", ongoing: 0, total: 0 },
]);

const examChart = ref<HTMLElement | null>(null);

onMounted(() => {
  if (examChart.value) {
    const chart = echarts.init(examChart.value);
    const option = {
      animation: false,
      tooltip: {
        trigger: "axis",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["06/14", "06/15", "06/16", "06/17", "06/18", "06/19", "06/20"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "考试人数",
          type: "line",
          data: [12, 8, 22, 20, 20, 28, 11],
          itemStyle: {
            color: "#409EFF",
          },
        },
        {
          name: "考完人数",
          type: "line",
          data: [2, 3, 2, 4, 4, 3, 3],
          itemStyle: {
            color: "#67C23A",
          },
        },
        {
          name: "通过人数",
          type: "line",
          data: [1, 1, 1, 1, 1, 1, 1],
          itemStyle: {
            color: "#E6A23C",
          },
        },
      ],
    };
    chart.setOption(option);
  }
});
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  min-height: 100vh;
  /* background-color: #f5f7fa; */
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  /* color: #1f2f3d; */
  margin: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.version {
  font-size: 14px;
  /* color: #909399; */
  font-weight: normal;
}

.statistics-cards {
  margin-bottom: 24px;
  grid-template-columns: repeat(8, 12%);
  /* background-color: #0a84ff !important; */
}

.stat-card {
  /* background-color: #fff; */
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); */
}

.stat-value {
  font-size: 14px;
  /* color: #86ccfb; */
  font-weight: bold;
  margin-bottom: 8px;
}
.el-col-6,
.el-col-6.is-guttered {
  margin-bottom: 18px;
}
.el-col-3 {
  flex: 0 0 12.5%;
  max-width: 100% !important;
}
.stat-label {
  font-size: 24px;
  /* color: #ffffff; */
}

.quick-access {
  margin-bottom: 24px;
}

.quick-access-card {
  height: 100%;
  cursor: pointer;
  transition: transform 0.3s;
}

.quick-access-card:hover {
  transform: translateY(-5px);
}

.card-content {
  text-align: center;
  padding: 20px;
}
.el-alert--warning.is-light {
  background-color: #ffeded;
}
.icon {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 50%;
}

.icon.blue {
  background-color: #ecf5ff;
  color: #409eff;
}
.icon.orange {
  background-color: #fdf6ec;
  color: #e6a23c;
}
.icon.green {
  background-color: #f0f9eb;
  color: #67c23a;
}
.icon.purple {
  background-color: #f4f4f5;
  color: #909399;
}
.icon.cyan {
  background-color: #e6f7ff;
  color: #1890ff;
}
.icon.pink {
  background-color: #fff0f6;
  color: #eb2f96;
}
.icon.indigo {
  background-color: #f0f5ff;
  color: #2f54eb;
}
.icon.teal {
  background-color: #e6fffb;
  color: #13c2c2;
}

.card-content h3 {
  font-size: 16px;
  margin: 12px 0 8px;
  /* color: #303133; */
}

.card-content p {
  font-size: 14px;
  /* color: #909399; */
  margin: 0;
}

.data-section {
  margin-bottom: 61px;
}

.section-box {
  /* background-color: #fff; */
  border-radius: 4px;
  padding: 20px;
  height: 100%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-legend {
  display: flex;
  gap: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}
</style>
